 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<%@ taglib prefix="s" uri="/struts-tags"%>
<head>
</head>
<body>
 <table cellpadding="0" cellspacing="0" border="0" class="responsive dynamicTable display table table-bordered" width="100%">
                                        <thead>
                                            <tr>
                                                <th style="text-align: center;" align="center">Serial</th>
                                                <th>Node Id</th>
                                                <th>Node Name</th>
                                                <th>Data Type</th>
                                                <th>Node Type</th>
                                                <th>Segment</th>
                                                <th>Parent Node</th>
												<th class="nonMobile">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <s:iterator value="nodeHierarchyList" id="nodeHierarchyLst" status="indx">
						                	
						                	<tr>
							                    <td style="text-align: center;"><s:property value="#indx.count"/></td>
							                    <td style="text-align: center;"><s:property value="nodeId"  /></td>
							                    <td style="text-align: left;"><s:property value="vizString"  /></td>
							                    <td style="text-align: center;"><s:property value="dataType"  /></td>
							                    <td style="text-align: left;"><s:property value="nodeTypeName"  /></td>
							                    <td style="text-align: left;"><s:property value="segmentName"  /></td>
							                    <td style="text-align: center;"><s:property value="parentNode"  /></td>
							                    <td  class="nonMobile">
							                       <div class="controls center">
														<a href="#editWindow<s:property value="#indx.count"/>" title="Edit Node" class="tip" data-toggle="modal"><span class="icon12 icomoon-icon-pencil"></span></a>
														<a href="#delConfirmation<s:property value="#indx.count"/>" title="Remove Node" onClick="" class="tip" data-toggle="modal"><span class="icon12 icomoon-icon-remove"></span></a>
												  </div>	
												  
												  
												  <!-- Edit Confirmation Modal -->
												 <form style="margin: 0;display: inline;" action="editNode.action" id="editForm<s:property value="#indx.count"/>">
												 <div id="editWindow<s:property value="#indx.count"/>" class="modal hide fade" style="display: none; ">
												     <div class="modal-header" style="text-align: left;padding-left: 10px;">
												       <button type="button" class="close" data-dismiss="modal"><span class="icon12 minia-icon-close"></span></button>
												       <h3>Node Edit Window</h3>
												     </div>
												     <div class="modal-body">
												             
												            <div class="form-row row-fluid">
					                                            <div class="span12">
					                                                <div class="row-fluid">
					                                                    <label class="form-label span3" for="node.label">Node Name<font style="color:red">*</font></label>
					                                                    <input class="span9" type="text" value="<s:property value='label' />" name="node.label" id="label" />						
																		
					                                                </div>
					                                            </div>
					                                        </div>
															
															 <div class="form-row row-fluid">
					                                            <div class="span12">
					                                                <div class="row-fluid">
					                                                    <label class="form-label span3" for="node.description">Description<font style="color:red">*</font></label>
					                                                    <input class="span9" type="text"  value="<s:property value='description'/>" name="node.description" id="description" />
					                                                </div>
					                                            </div>
					                                        </div> 
					                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.dataType">Data Type<font style="color:red">*</font></label>
                                                    <div class="span9 controls sel"> 
	                                                    <select  name="node.dataType" id="dataType" class="nostyle" style="width:100%;">
	                                                       <option></option>
	                                                       <option value="INTEGER" <s:if test="dataType == 'INTEGER'">selected='selected'</s:if>>INTEGER</option>
	                                                       <option value="NONE" <s:if test="dataType == 'NONE'">selected='selected'</s:if>>NONE</option>																
		                                                </select>
	                                                </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
										
										<div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.nodeTypeId">Node Type<font style="color:red">*</font></label>
                                                    <div class="span9 controls sel">
	                                                    <select  name="node.nodeTypeId" id="nodeTyp" class="nostyle" style="width:100%;">
	                                                       <option></option>
	                                                       <option value="1" <s:if test="nodeTypeId == 1">selected='selected'</s:if>>HEADER1</option>
	                                                       <option value="2" <s:if test="nodeTypeId == 2">selected='selected'</s:if>>KPI</option>
	                                                       <option value="3" <s:if test="nodeTypeId == 3">selected='selected'</s:if>>COMMENT</option>
	                                                       <option value="4" <s:if test="nodeTypeId == 4">selected='selected'</s:if>>HEADER2</option>																
		                                                </select>
	                                                </div>
                                                </div>
                                            </div>
                                        </div>
										<div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.segmentId">Segment<font style="color:red">*</font></label>
                                                    <div class="span9 controls sel" style="text-align:left;">    
	                                                    <s:property value="segmentName" />
					                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.parentNode">Parent Node</label>
                                                    <div class="span9 controls sel" id="parentNodeDiv<s:property value="#indx.count"/>">   
	                                                    <select  name="node.parentNode" id="parentNod" class="nostyle" style="width:100%;">
					                                    		<option></option>
						                                </select>
						                                
					                                </div>
                                                </div>
                                            </div>
                                        </div>
										
										<script type="text/javascript">
										
										fetchParentNodeSelectBox('<s:property value="segmentId" />','parentNodeDiv'+<s:property value="#indx.count"/>,'<s:property value="parentNode"/>');
										</script>		           
												           
												             <input type="hidden" name="node.nodeId" value="<s:property value='nodeId' />" />                              
												     </div>
												     <div class="modal-footer">
												       <a href="#" class="btn" data-dismiss="modal">No</a>
												       <a href="#" class="btn btn-primary" onclick="editNode(<s:property value='#indx.count'/>)">Yes</a>
												     </div>
												</div>
												</form>
												<!-- Edit Confirmation Modal -->
												
												  <!-- Delete Confirmation Modal -->
												 <div id="delConfirmation<s:property value="#indx.count"/>" class="modal hide fade" style="display: none; ">
												     <div class="modal-header">
												       <button type="button" class="close" data-dismiss="modal"><span class="icon12 minia-icon-close"></span></button>
												       <h3>Delete Confirmation</h3>
												     </div>
												     <div class="modal-body">
												         <div class="paddingT15 paddingB15">    
												           <h4>Are you sure you want to delete ?</h4>
												           <p><b>Node Name :</b> <s:property value="nodeName"  /></p>
												         </div>                                    
												     </div>
												     <div class="modal-footer">
												       <a href="#" class="btn" data-dismiss="modal">No</a>
												       <a href="deleteNode.action?node.nodeId=<s:property value="nodeId"/>&node.nodeName=<s:property value="nodeName"/>" class="btn btn-primary">Yes</a>
												     </div>
												</div>
												<!--  Delete Confirmation -->
													
							                    </td>
							                </tr>
							            </s:iterator>
										
				
                                        </tbody>
                                        
                                    </table>
</body> 
</html>                                    